<template>
  <div style="width: 100%; height: 100%; position: fixed">
    <div class="ant-modal-root">
      <div class="ant-modal-mask"></div>
      <div tabindex="-1" class="ant-modal-wrap" role="dialog">
        <div
          role="document"
          class="ant-modal out1"
          style="width: 920px; transform-origin: 592px 178px"
        >
          <div
            tabindex="0"
            aria-hidden="true"
            style="width: 0px; height: 0px; overflow: hidden; outline: none"
          ></div>
          <div class="ant-modal-content">
            <button
              v-if="showCloseButton"
              type="button"
              aria-label="Close"
              class="ant-modal-close"
              @click="closePayDialog"
            >
              <span class="ant-modal-close-x"
                ><span
                  role="img"
                  class="anticon link ed close1"
                  style="width: 32px; height: 32px; font-size: 32px"
                  ><svg
                    width="1em"
                    height="1em"
                    fill="currentColor"
                    aria-hidden="true"
                    focusable="false"
                    class=""
                  >
                    <use xlink:href="#icon-close">
                      <svg id="icon-close" viewBox="0 0 1024 1024">
                        <path
                          d="M512 455.099733l237.056-237.056 56.900267 56.900267L568.900267 512l237.056 237.056-56.900267 56.900267L512 568.900267l-237.056 237.056-56.900267-56.900267L455.099733 512 218.043733 274.944l56.900267-56.900267L512 455.099733z"
                        ></path>
                      </svg>
                    </use></svg></span
              ></span>
            </button>
            <div class="ant-modal-body">
              <div class="out2">
                <div class="flex-ca out3">
                  <div class="out4">
                    <el-avatar
                      v-if="avatar.indexOf('default') == -1"
                      :size="70"
                      :src="avatar"
                    ></el-avatar>
                    <el-avatar
                      v-else
                      :size="70"
                      :src="require('../assets/images/myAvatar.png')"
                    ></el-avatar>
                  </div>
                  <div class="flex-11 flex-ccj out5">
                    <p>{{ name }}</p>
                    <div class="out6">
                      <div>{{ mtips }}</div>
                      <div class="flex-cc out7"></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="out8">
              <div class="out9" v-if="description">
                <div
                  class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-center _3B1_mETI1Dupwy5HNFGsMf"
                  role="separator"
                >
                  <span class="ant-divider-inner-text">{{ description }}</span>
                </div>
              </div>
              <div class="vip1">
                <el-menu
                  :default-active="activeIndex"
                  class="el-menu-demo"
                  mode="horizontal"
                  @select="handleSelect"
                >
                  <el-menu-item index="1"
                    ><button class="link vip2" type="button">
                      <img
                        style="margin-left: -58px"
                        alt="VIP"
                        src="@/assets/images/vip6.svg"
                      /><span
                        v-bind:class="{ 'active-title': currentIndex == 1 }"
                        >标准会员</span
                      >
                    </button></el-menu-item
                  >
                  <el-menu-item index="2"
                    ><button class="link vip2 ed" type="button">
                      <img
                        style="margin-left: -78px"
                        alt="VIP"
                        src="@/assets/images/vip2.svg"
                      /><span
                        v-bind:class="{ 'active-title': currentIndex == 2 }"
                        >高级会员<small
                          >（最多选择，每日低至{{
                            seniorVipDayPrice
                          }}元）</small
                        ></span
                      >
                    </button></el-menu-item
                  >
                </el-menu>
              </div>
              <div class="flex-ca tips1">
                <div class="flex-11 tips2">
                  <ul class="num" v-if="currentIndex == 1">
                    <span class="tipitem">● 免广告</span>
                    <span class="tipitem">● 阅读1500篇/月</span>
                    <span class="tipitem">● 下载300篇/月</span>
                    <span class="tipitem">● 小程序共享</span>
                    <span class="tipitem">● 无限制报告搜索</span>
                    <span class="tipitem">● 免费加入群组</span>
                  </ul>
                  <ul class="num" v-if="currentIndex == 2">
                    <span class="tipitem">● 免广告</span>
                    <span class="tipitem">● 阅读3000篇/月</span>
                    <span class="tipitem">● 下载600篇/月</span>
                    <span class="tipitem">● 小程序共享</span>
                    <span class="tipitem">● 无限制报告搜索</span>
                    <span class="tipitem">● 无限制图表搜索</span>
                    <span class="tipitem">● 报告、图表分类筛选</span>
                    <span class="tipitem">● 图表查看原文件</span>
                    <span class="tipitem">● 免费加入群组</span>
                  </ul>
                </div>
              </div>
              <button type="button" class="ck bt1 bt2" v-if="selectVip">
                <div class="i-0" v-if="currentIndex == 2">80%用户的选择</div>
                <div class="flex-ca bt3">
                  <small>￥</small>{{ selectVip.price }}<span>/年</span>
                </div>
                <div class="flex-ca bt4">
                  {{ period }}<small>原价 {{ selectVip.org_price }}元</small>
                </div>
                <span
                  role="img"
                  class="anticon bt5"
                  style="
                    margin: 0px;
                    width: 30px;
                    height: 30px;
                    font-size: 30px;
                  "
                  ><svg
                    width="1em"
                    height="1em"
                    fill="currentColor"
                    aria-hidden="true"
                    focusable="false"
                    class=""
                  >
                    <use xlink:href="#icon-select">
                      <svg id="icon-select" viewBox="0 0 1024 1024">
                        <path
                          d="M259.8912 434.517333L204.8 488.448l250.538667 245.418667L853.333333 344.064 798.242133 290.133333l-342.869333 335.872z"
                        ></path>
                      </svg>
                    </use></svg
                ></span>
              </button>
              <div class="pay1 pay2">
                <div class="pay3">
                  <button
                    type="button"
                    @click="changePayway('zhifubao')"
                    :class="
                      payWay == 'weixin'
                        ? 'flex-ca link pay4'
                        : 'flex-ca link pay2'
                    "
                  >
                    <span
                      role="img"
                      class="anticon"
                      style="
                        margin: 0px 4px;
                        width: 20px;
                        height: 20px;
                        font-size: 20px;
                      "
                      ><svg
                        width="1em"
                        height="1em"
                        fill="currentColor"
                        aria-hidden="true"
                        focusable="false"
                        class=""
                      >
                        <use xlink:href="#icon-alipay">
                          <svg id="icon-alipay" viewBox="0 0 1024 1024">
                            <path
                              d="M694.6304 586.1376s25.2928-37.888 52.3264-112.1792c27.0336-74.2912 30.8736-115.0976 30.8736-115.0976l-213.1968-1.7408V284.2624l258.2016-1.792V230.912h-258.2528V113.7664h-126.464v117.248H197.12v51.456l240.9472-1.7408V358.912H244.8384v40.8064h397.824s-4.4032 33.0752-19.6608 74.24c-15.2576 41.216-30.976 77.312-30.976 77.312s-186.7264-65.3824-285.184-65.3824c-98.4064 0-218.112 39.5264-229.6832 154.2656-11.5712 114.688 55.7568 176.8448 150.528 199.68 94.8736 23.04 182.4256-0.2048 258.6624-37.5296 76.2368-37.2736 151.04-121.9584 151.04-121.9584L1024 869.3248V921.6a102.4 102.4 0 0 1-102.4 102.4H102.4a102.4 102.4 0 0 1-102.4-102.4V102.4a102.4 102.4 0 0 1 102.4-102.4h819.2a102.4 102.4 0 0 1 102.4 102.4v594.4832l-329.3696-110.7456z m-411.6992 197.888c-141.312 0-170.9056-71.8848-170.9056-123.5968 0-51.6608 29.3376-107.8272 149.504-115.968 120.1152-8.0896 282.4704 88.2688 282.4704 88.2688-0.0512 0-119.9104 151.296-261.12 151.296z"
                              fill="#02A9F1"
                            ></path>
                          </svg>
                        </use></svg></span
                    ><span class="flex-11">支付宝</span></button
                  ><button
                    type="button"
                    @click="changePayway('weixin')"
                    :class="
                      payWay == 'weixin'
                        ? 'flex-ca link pay2'
                        : 'flex-ca link pay4'
                    "
                  >
                    <span
                      role="img"
                      class="anticon"
                      style="
                        margin: 0px 4px;
                        width: 20px;
                        height: 20px;
                        font-size: 20px;
                      "
                      ><svg
                        width="1em"
                        height="1em"
                        fill="currentColor"
                        aria-hidden="true"
                        focusable="false"
                        class=""
                      >
                        <use xlink:href="#icon-wxpay">
                          <svg id="icon-wxpay" viewBox="0 0 1024 1024">
                            <path
                              d="M102.4 0h819.2a102.4 102.4 0 0 1 102.4 102.4v819.2a102.4 102.4 0 0 1-102.4 102.4H102.4a102.4 102.4 0 0 1-102.4-102.4V102.4a102.4 102.4 0 0 1 102.4-102.4z m778.24 599.2448C880.64 493.056 781.1072 409.6 659.456 409.6c-121.6512 0-221.184 83.456-221.184 189.6448 0 106.1888 99.5328 189.5936 221.184 189.5936 22.1184 0 44.2368-3.7888 66.3552-7.5776l70.0416 37.9392-18.432-56.8832c62.6688-37.888 103.2192-94.8224 103.2192-163.072z m-298.5984-30.3616c-22.1184 0-36.864-15.1552-36.864-37.888 0-22.784 14.7456-37.9392 36.864-37.9392s36.864 15.1552 36.864 37.888c0 18.944-18.432 37.9392-36.864 37.9392z m151.1424 0c-22.1184 0-36.864-15.1552-36.864-37.888 0-22.784 14.7456-37.9392 36.864-37.9392s36.864 15.1552 36.864 37.888c0 18.944-18.432 37.9392-36.864 37.9392z m-331.776 22.784c0-117.6064 110.592-212.4288 250.6752-212.4288h11.0592C633.6512 280.6272 534.1184 204.8 408.7808 204.8 261.3248 204.8 143.36 307.2 143.36 432.3328c0 79.6672 47.9232 151.7056 121.6512 189.6448l-22.1184 68.2496 84.7872-41.6768a279.9616 279.9616 0 0 0 81.1008 11.3664h7.3728a152.32 152.32 0 0 1-14.7456-68.2496z m99.5328-307.2c25.8048 0 47.9232 22.7328 47.9232 49.3056 0 26.5216-22.1184 49.2544-47.9232 49.2544-25.8048-3.7888-47.9232-26.5216-47.9232-53.0944 0-26.5216 22.1184-45.4656 47.9232-45.4656zM320.3072 379.2384c-25.8048 0-44.2368-22.7328-44.2368-49.3056 0-26.5216 22.1184-49.3056 47.9232-49.3056s44.2368 22.784 44.2368 49.3056c0 26.5728-22.1184 49.3056-47.9232 49.3056z"
                              fill="#60C61C"
                            ></path>
                          </svg>
                        </use></svg></span
                    ><span class="flex-11">微信</span>
                  </button>
                </div>
                <div class="flex-c ma1 pay4">
                  <img
                    v-if="payWay == 'zhifubao'"
                    alt="二维码支付"
                    :src="zhifubaoUrl"
                    class="pay4"
                    style="width: 108px; height: 108px"
                    :class="needRefresh ? 'invalid' : ''"
                  />
                  <img
                    v-if="payWay == 'weixin'"
                    alt="二维码支付"
                    :src="paySrcUrl"
                    class="pay4"
                    style="width: 108px; height: 108px"
                    :class="needRefresh ? 'invalid' : ''"
                  />
                </div>
                <div class="flex-11 flex-ccj money1">
                  <p class="money2">
                    金额：<span><small>￥</small>{{ payPrice }}</span>
                  </p>
                  <p
                    class="link"
                    v-on:mouseover="showGongzhong()"
                    v-on:mouseout="hideGongzhong()"
                  >
                    如何申请发票？
                  </p>
                  <p class="refresh" v-if="needRefresh" @click="getPayStatus()">
                    刷新二维码
                  </p>
                </div>
                <div class="QRcode" v-if="showGongzhonghao">
                  <div class="QRcode-top">
                    <img src="@/assets/images/wechat-qrcode.jpg" alt="" />
                  </div>
                  <div class="QRcode-text">开发票</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          tabindex="0"
          aria-hidden="true"
          style="width: 0px; height: 0px; overflow: hidden; outline: none"
        ></div>
      </div>
    </div>
  </div>
  <!-- </div> -->
</template>

<script>
var loopId = null;
import storage from "@/utils/storage";
import { getVipPrice, getLastOrderPayStatus } from "@/api/user.js";
import { mapGetters } from "vuex";

export default {
  data() {
    return {
      currentIndex: 2,
      activeIndex: "2",
      monthPrice: 25,
      period: "年度",
      payPrice: "298.00",
      payWay: "weixin",
      generalVipPrice: 0,
      seniorVipDayPrice: 0,
      priceBefore: 599,
      paySrcUrl: "",
      zhifubaoUrl: "",
      showGongzhonghao: false,
      needRefresh: false,
      loopId: 0,
      loginVisible: false,
    };
  },
  props: {
    description: {
      type: String,
      default: "开通VIP，解锁会员专属特权",
    },
    mtips: {
      type: String,
      default: "开通VIP，解锁会员专属特权",
    },
    type: {
      type: String,
      default: "",
    },
    payItem: {
      type: Number,
      default: 2,
    },
    fileid: {
      type: Number,
      default: 0,
    },
    showCloseButton: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    ...mapGetters(["sid", "openid", "uid", "name", "avatar", "showLogin"]),

    modalStatus: {
      get() {
        return this.value;
      },
      set(value) {
        this.$emit("input", value);
      },
    },
  },
  mounted() {
    this.getVipPriceList();
  },
  created() {},
  destroyed() {
    clearInterval(this.loopId);
  },
  watch: {
    name(newVal) {
      this.nickname = newVal; //对父组件传过来的值进行监听，如果改变也对子组件内部的值进行改变
    },
    payItem: {
      handler(newval, old) {
        console.log(newval, old);
        this.handleSelect(newval, 0);
      },
      immediate: true,
    },
  },
  methods: {
    closePayDialog: function () {
      this.$emit("closePayDialog", false);
      if (loopId > 0) {
        clearInterval(loopId);
      }
      loopId = null;
    },
    getPayStatus() {
      var that = this;
      var count = 0;
      this.needRefresh = false;
      if (this.loopId) {
        clearInterval(this.loopId);
      }
      this.loopId = window.setInterval(() => {
        if (!that.loginVisible) {
          clearInterval(this.loopId);
        }
        count++;
        if (count > 200) {
          clearInterval(this.loopId);
          this.needRefresh = true;
          return;
        }
        if (this.payWay == "weixin") {
          getLastOrderPayStatus(0)
            .then((res) => {
              if (res.data == 1 || res.message == "订单信息不存在") {
                this.$store.dispatch("GetInfo");
                window.location.reload();
              }
            })
            .catch((err) => {
              this.loading = false;
              // window.location.reload();
            });
        } else {
          getLastOrderPayStatus(1)
            .then((res) => {
              if (res.data == 1 || res.message == "订单信息不存在") {
                this.$store.dispatch("GetInfo");
                window.location.reload();
              }
            })
            .catch((err) => {
              this.loading = false;
              // window.location.reload();
            });
        }
      }, 1500);
    },
    changePayway(e) {
      this.payWay = e;
    },

    handleSelect(key, keyPath) {
      this.currentIndex = key;
      this.activeIndex = String(key);
      if (key == 1) {
        this.selectVip = this.normalVip;
      } else if (key == 2) {
        this.selectVip = this.highVip;
      }
    },
    //获取会员价格数据信息
    getVipPriceList() {
      getVipPrice().then((res) => {
        // this.generalVipPrice = res.infor.price;
        // this.generalVipRawPrice = res.infor.org_price;
        // this.generalVipDayPrice = Math.ceil(this.generalVipPrice / 3);

        // this.seniorVipPrice = res.infor.vip_price;
        // this.seniorVipRawPrice = res.infor.vip_org_price;
        // this.seniorVipMonthPrice = Math.ceil(this.seniorVipPrice / 12);
        // this.seniorVipDayPrice =
        //   Math.floor((this.seniorVipPrice / 365) * 10) / 10;

        // this.businessVipPrice = res.infor.business_price;
        // this.businessVipRawPrice = res.infor.business_org_price;
        // this.businessVipDayPrice = Math.ceil(this.businessVipPrice / 12);
        this.priceList = res.data.items;
        this.normalVip = res.data.items[0];
        this.highVip = res.data.items[1];
      });
    },
    showGongzhong() {
      this.showGongzhonghao = true;
      // //      console.log(this.showGongzhonghao )
    },
    hideGongzhong() {
      this.showGongzhonghao = false;
    },
    getPayPic(type) {
      var that = this;
      that = this;
      let params = {
        item_id: type,
        openid: this.openid,
      };
      const env = require("/env");
      let url =
        env[process.env.NODE_ENV] +
        "/api/pay/wxOffiaccountQrCode?offiaccountOpenid=" +
        params.openid +
        "&itemId=" +
        params.item_id +
        "&fileId=" +
        this.fileid;
      this.paySrcUrl = url;
      that.zhifubaoUrl =
        env[process.env.NODE_ENV] +
        "/api/v2/alipay/generateFaceToFaceQrCode?userId=" +
        this.uid +
        "&itemId=" +
        params.item_id +
        "&fileId=" +
        this.fileid;
      this.loginVisible = true;
      this.getPayStatus();
    },
  },
};
</script>

<style lang="less" scoped>
.active-title {
  font-size: 16px;
  font-weight: 900;
  color: #e46343;
}

.invalid {
  -webkit-filter: blur(5px); /* Chrome, Safari, Opera */
  filter: blur(5px);
}

.refresh {
  margin-top: 30px;
  color: #2676d3;
}

.ant-modal {
  box-sizing: border-box;
  color: rgba(0, 0, 0, 0.85);
  font-size: 14px;
  font-variant: tabular-nums;
  line-height: 1.5715;
  list-style: none;
  font-feature-settings: "tnum";
  pointer-events: none;
  position: relative;
  width: auto;
  max-width: calc(100vw - 32px);
  margin: 0 auto;
  padding: 0 0 24px;
}

.ant-modal.ant-zoom-enter,
.ant-modal.antzoom-appear {
  transform: none;
  opacity: 0;
  animation-duration: 0.3s;
  user-select: none;
}

.ant-modal-mask {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.45);
}

.ant-modal-mask-hidden {
  display: none;
}

.ant-modal-wrap {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  outline: 0;
  -webkit-overflow-scrolling: touch;
  z-index: 1000;
}

.ant-modal-title {
  margin: 0;
  color: rgba(0, 0, 0, 0.85);
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
  word-wrap: break-word;
}

.ant-modal-content {
  position: relative;
  background-color: #fff;
  background-clip: padding-box;
  border: 0;
  border-radius: 2px;
  box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12),
    0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
  pointer-events: auto;
}

.ant-modal-close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
  padding: 0;
  color: rgba(0, 0, 0, 0.45);
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  background: transparent;
  border: 0;
  outline: 0;
  cursor: pointer;
  transition: color 0.3s;
}

.ant-modal-close-x {
  display: block;
  width: 56px;
  height: 56px;
  font-size: 16px;
  font-style: normal;
  line-height: 56px;
  text-align: center;
  text-transform: none;
  text-rendering: auto;
}

.ant-modal-close:focus,
.ant-modal-close:hover {
  color: rgba(0, 0, 0, 0.75);
  text-decoration: none;
}

.ant-modal-header {
  padding: 16px 24px;
  color: rgba(0, 0, 0, 0.85);
  background: #fff;
  border-bottom: 1px solid #f0f0f0;
  border-radius: 2px 2px 0 0;
}

.ant-modal-body {
  padding: 24px;
  font-size: 14px;
  line-height: 1.5715;
  word-wrap: break-word;
}

.ant-modal-footer {
  padding: 10px 16px;
  text-align: right;
  background: transparent;
  border-top: 1px solid #f0f0f0;
  border-radius: 0 0 2px 2px;
}

.ant-modal-footer .ant-btn + .ant-btn:not(.ant-dropdown-trigger) {
  margin-bottom: 0;
  margin-left: 8px;
}

.ant-modal-open {
  overflow: hidden;
}

.ant-modal-centered {
  text-align: center;
}

.ant-modal-centered:before {
  display: inline-block;
  width: 0;
  height: 100%;
  vertical-align: middle;
  content: "";
}

.ant-modal-centered .ant-modal {
  top: 0;
  display: inline-block;
  text-align: left;
  vertical-align: middle;
}

.out2 {
  height: 100px;
  padding: 10px 40px 10px;
  // background-size: cover;
  background-position: 50%;
  background-repeat: no-repeat;
  background-image: url("/vip-title.png");
}

.out4 {
  flex: 0 0 70px;
  overflow: hidden;
  border-radius: 50%;
  border: 2px solid #fff;
}

.out4 > span {
  color: #999;
  justify-content: center;
  font-size: 32px !important;
}

.out5 {
  padding-left: 20px;
  color: #333;
  line-height: 26px;
}

.out5 > p {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 6px;
}

.out5 > div img {
  height: 20px;
  margin-right: 6px;
}

.out5 > div span {
  color: #999;
}

.out5 > .out6 {
  display: flex;
  justify-content: space-between;
}

.out3 .out7 {
  padding: 2px 0;
  text-align: right;
  align-items: flex-end;
  height: 26px;
}

.out7 > p {
  color: #666;
  margin-bottom: 0;
}

.out7 > p span {
  color: #333;
}

.out2._1ABHPUuOFI0N4GQOfDs9ql {
  padding: 20px;
}

.out2._1ABHPUuOFI0N4GQOfDs9ql .out6 {
  opacity: 0.8;
  font-size: 12px;
  line-height: 20px;
}

.pay1 {
  width: 710px;
  flex: 0 0 710px;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  padding: 16px 60px;
  transition: all 0.2s;
  background-color: #f6f8fb;
}

.pay1.pay4 {
  height: 0;
  padding: 0;
}

.pay3 {
  flex: 0 0 112px;
  border: 1px solid #e4e4e4;
  border-right-width: 0;
}

.pay3 > * {
  width: 100%;
  height: 50%;
  transition: all 0.2s;
  padding: 0 16px !important;
  border-right: 1px solid #e4e4e4 !important;
}

.pay3 > :first-child {
  border-bottom: 1px solid #e4e4e4;
}

.pay3 > .pay2 {
  background-color: #fff;
  border-right: none !important;
}

.ma1 {
  width: 164px;
  height: 164px;
  flex-wrap: wrap;
  flex: 0 0 164px;
  overflow: hidden;
  position: relative;
  border: 1px solid #e4e4e4;
  border-left-width: 0;
  background-color: #fff;
}

.ma1.pay2 > img {
  opacity: 0.1 !important;
}

.ma1 .ma2 {
  flex: 0 0 90%;
  text-align: center;
}

.ma1 ._2L4bgMnnT32_mFABiArg-i {
  width: 90%;
  height: 90%;
  opacity: 0.95;
  text-align: center;
}

.ma1 ._2L4bgMnnT32_mFABiArg-i * {
  color: #60c61c;
}

.money1 {
  color: #999;
  text-align: left;
  padding-left: 30px;
}

.money1 > * {
  margin: 0;
  line-height: 32px;
}

.money1 > :nth-child(2) {
  width: 150px;
  overflow: hidden;
}

.money1 .money2 {
  position: relative;
}

.money1 .money2 span {
  color: #333;
  font-size: 30px;
  font-weight: 700;
}

.money1 .money2 small {
  font-size: 20px;
  font-weight: 400;
}

.money1 .money2 i {
  text-decoration: line-through;
}

.money1 ._2HYzkVJR8XyN9Unid7rbiU {
  margin: 6px auto;
  padding: 0 8px;
  color: #e46343;
  height: 24px;
  width: auto !important;
  font-size: 12px;
  line-height: 24px;
  background-color: #ffebd8;
}

.pay1._1CoycMJht7_QbyMpw7wiqE {
  width: auto;
  padding: 16px 32px;
}

.pay1.PuJyIRnrZxThfabjeNjl3 {
  padding: 0;
  width: 80%;
  flex: 0 0 80%;
  margin: 0 auto;
  flex-wrap: wrap;
  justify-content: center;
  background-color: transparent;
}

.pay1.PuJyIRnrZxThfabjeNjl3 .pay3 {
  display: flex;
  flex: 0 0 200px;
  border-bottom-width: 0;
  border-right-width: 1px;
}

.pay1.PuJyIRnrZxThfabjeNjl3 .pay3 > * {
  width: 50%;
  height: 45px;
  padding: 0 !important;
  justify-content: center;
  border-right: none !important;
  border-bottom: 1px solid #e4e4e4 !important;
}

.pay1.PuJyIRnrZxThfabjeNjl3 .pay3 > * > * {
  flex: 0 0 auto;
}

.pay1.PuJyIRnrZxThfabjeNjl3 .pay3 > :first-child {
  border-right: 1px solid #e4e4e4 !important;
}

.pay1.PuJyIRnrZxThfabjeNjl3 .pay3 > .pay2 {
  border-bottom: none !important;
}

.pay1.PuJyIRnrZxThfabjeNjl3 .ma1 {
  width: 200px;
  height: 200px;
  flex: 0 0 200px;
  border-top-width: 0;
  border-left-width: 1px;
}

.pay1.PuJyIRnrZxThfabjeNjl3 .ma1 > img {
  width: 236px;
  height: 236px;
}

.pay1.PuJyIRnrZxThfabjeNjl3 .money1 {
  flex: 0 0 100%;
  padding-left: 0;
  padding-top: 20px;
  text-align: center;
}

.pay1.PuJyIRnrZxThfabjeNjl3 .money1 .money2 span {
  color: #e46343;
}

.pay1.PuJyIRnrZxThfabjeNjl3 .money1 > :nth-child(2) {
  width: 100%;
}

button.bt1 {
  height: 100px;
  display: flex;
  cursor: pointer;
  // flex: 0 0 340px;
  text-align: left;
  align-items: center;
  position: relative;
  margin: 30px 15px;
  transition: all 0.2s;
  background-color: #fff;
  border: 2px solid #dbe7f5;
  border-width: 2px !important;
}

.bt1 > [class~="i-0"] {
  top: 0;
  left: 0;
  color: #e36f3f;
  font-weight: 600;
  font-size: 12px;
  padding: 0 14px;
  line-height: 30px;
  position: absolute;
  background-color: #fcf0eb;
  border-bottom-right-radius: 15px;
}

.bt1 .bt3 {
  padding-left: 20px;
  flex: 0 0 52%;
  color: #e36f3f;
  font-size: 50px;
  font-weight: 700;
}

.bt1 .bt3 small {
  font-size: 18px;
  font-weight: 600;
  margin-top: 18px;
}

.bt1 .bt3 span {
  font-weight: 600;
  font-size: 36px;
}

.bt1 .bt4 {
  color: #333;
  font-weight: 600;
  flex: 0 0 48%;
  flex-wrap: wrap;
  font-size: 20px;
  min-height: 60px;
  align-items: center;
  padding-left: 20px;
  border-left: 2px solid #dbe7f5;
}

.bt1 .bt4 small {
  color: #999;
  flex: 0 0 100%;
  font-size: 16px;
  line-height: 22px;
  font-weight: 400;
  text-decoration: line-through;
}

.bt1 .bt5 {
  right: 0;
  bottom: 0;
  opacity: 0;
  transition: all 0.2s;
  color: #fff;
  padding: 0 10px;
  position: absolute;
  box-sizing: content-box;
  border-top-left-radius: 10px;
  background-color: #388ae9;
}

.bt1.bt2 {
  border-color: #388ae9;
  background-color: #f5faff;
}

.bt1:hover {
  border-color: #388ae9;
}

.bt1.bt2 .bt5 {
  opacity: 1;
}

.bt1._1njPfGNjBXrZYKaI4pEupi {
  flex-wrap: wrap;
  padding: 30px 0;
  align-items: stretch;
}

.bt1._1njPfGNjBXrZYKaI4pEupi .bt4,
.bt1._1njPfGNjBXrZYKaI4pEupi .bt3 {
  flex: 0 0 100%;
  min-height: 40px;
  height: 40px;
  padding-left: 0;
  border-left: none;
  text-align: center;
  justify-content: center;
}

.bt1._1njPfGNjBXrZYKaI4pEupi .bt4 {
  font-size: 20px;
}

.bt1._1njPfGNjBXrZYKaI4pEupi .bt3 {
  font-size: 28px;
}

.bt1._1njPfGNjBXrZYKaI4pEupi .bt3 small {
  margin-top: 6px;
}

.vip1 {
  flex: 0 0 100%;
  position: relative;
  margin: -20px -40px 20px;
}

.vip1:after {
  position: absolute;
  bottom: 0;
  left: -40px;
  right: -40px;
  content: " ";
  border-bottom: 1px solid #dbe7f5;
}

.vip1 .vip2 {
  width: 50%;
  height: 50px;
  font-size: 16px;
  line-height: 50px;
  position: relative;
}

.vip1 .vip2 img {
  height: 30px;
  width: 30px;
}

.out8 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 20px 40px;
}

.out9 {
  width: 100%;
  padding: 0 160px;
  margin-bottom: 10px;
}

.tips1 {
  height: 60px;
  background-size: cover;
  background-position: 50%;
  background-repeat: no-repeat;
  flex: 0 0 calc(100% + 80px);
}

body .fx-card {
  box-shadow: 0 0 10px 0 rgba(39, 66, 107, 0.1);
}

body .fx-card,
body .fx-pane {
  padding: 20px 20px 30px;
  background-color: #fff;
}

body .fx-shadow:hover {
  box-shadow: 0 0 10px 0 rgba(39, 66, 107, 0.1);
}

body .fx-hover {
  transition: all 0.6s;
  transform: rotate(0);
}

body .fx-hover:hover {
  transform: rotate(1turn);
}

body .fx-modal [class~="ant-modal-close-x"] {
  display: flex;
  align-items: center;
  justify-content: center;
}

body .flex-start {
  display: flex;
  align-items: flex-start;
}

body .flex-c,
body .flex-c-c {
  display: flex;
  align-items: center;
  justify-content: center;
}

body .flex-c-c {
  flex-direction: column;
}

body .flex-ca {
  display: flex;
  align-items: center;
}

body .flex-cj {
  display: flex;
  justify-content: center;
}

body .flex-11 {
  flex: 1 1 auto;
}

body .flex-001 {
  flex: 0 0 100%;
}

body .flex-cc {
  align-items: center;
}

body .flex-cc,
body .flex-ccj {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

body .fx-img-error {
  box-shadow: none;
  position: relative;
  display: inline-block;
}

body .fx-img-error:before {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: " ";
  position: absolute;
  background-size: 50%;
  background-color: #f3f5f7;
  background-position: 50%;
  background-image: url(https://static.fxbaogao.com/pub/img/fallback.svg);
}

body .fx-img-error:after {
  top: 4%;
  right: 5%;
  opacity: 0.1;
  width: 10%;
  height: 50%;
  content: " ";
  position: absolute;
  background-size: contain;
  background-position: top;
  background-image: url(https://static.fxbaogao.com/pub/img/logo/fxbaogao/440x213.png);
}

body .fx-img-error-mini {
  box-shadow: none;
  position: relative;
  display: inline-block;
}

body .fx-img-error-mini:before {
  border: 1px solid #f3f5f7;
  background-color: #fff;
}

body .fx-img-error-mini:after,
body .fx-img-error-mini:before {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: " ";
  position: absolute;
}

body .fx-img-error-mini:after {
  opacity: 0.1;
  background-size: 50%;
  background-position: 50%;
  background-image: url(https://static.fxbaogao.com/pub/img/logo/fxbaogao/440x213.png);
}

body .container {
  width: 100%;
  padding: 0 12px;
  max-width: 1300px;
  margin: 0 auto !important;
}

body .pagination {
  padding: 20px;
  text-align: center;
  margin-bottom: 20px;
}

.out4 {
  flex: 0 0 70px;
  height: 70px;
  overflow: hidden;
  border-radius: 50%;
  border: 2px solid #fff;
}

.out4 > span {
  color: #999;
  justify-content: center;
  font-size: 32px !important;
}

.out5 {
  padding-left: 20px;
  color: #333;
  line-height: 26px;
}

.out5 > p {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 6px;
}

.out5 > div img {
  height: 20px;
  margin-right: 6px;
}

.out5 > div span {
  color: #999;
}

.out5 > .out6 {
  display: flex;
  justify-content: space-between;
}

.out3 .out7 {
  padding: 2px 0;
  text-align: right;
  align-items: flex-end;
  height: 26px;
}

.out7 > p {
  color: #666;
  margin-bottom: 0;
}

.out7 > p span {
  color: #333;
}

.out2._1ABHPUuOFI0N4GQOfDs9ql {
  padding: 20px;
}

.out2._1ABHPUuOFI0N4GQOfDs9ql .out6 {
  opacity: 0.8;
  font-size: 12px;
  line-height: 20px;
}

.pay3 {
  flex: 0 0 112px;
  border: 1px solid #e4e4e4;
  border-right-width: 0;
}

.pay3 > * {
  width: 100%;
  height: 50%;
  transition: all 0.2s;
  padding: 0 16px !important;
  border-right: 1px solid #e4e4e4 !important;
}

.pay3 > :first-child {
  border-bottom: 1px solid #e4e4e4;
}

.pay3 > .pay2 {
  background-color: #fff;
  border-right: none !important;
}

.ma1 {
  width: 164px;
  height: 164px;
  flex-wrap: wrap;
  flex: 0 0 164px;
  overflow: hidden;
  position: relative;
  border: 1px solid #e4e4e4;
  border-left-width: 0;
  background-color: #fff;
}

.ma1 > img {
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  position: absolute;
  transition: all 0.2s;
  transform: translate(-50%, -50%);
}

.ma1 > img.pay2 {
  opacity: 1;
}

.ma1.pay2 > img {
  opacity: 0.1 !important;
}

.ma1 .ma2 {
  flex: 0 0 90%;
  text-align: center;
}

.ma1 ._2L4bgMnnT32_mFABiArg-i {
  width: 90%;
  height: 90%;
  opacity: 0.95;
  text-align: center;
}

.ma1 ._2L4bgMnnT32_mFABiArg-i * {
  color: #60c61c;
}

.money1 {
  color: #999;
  text-align: left;
  padding-left: 30px;
}

.money1 > * {
  margin: 0;
  line-height: 32px;
}

.money1 > :nth-child(2) {
  width: 150px;
  overflow: hidden;
}

.money1 .money2 {
  position: relative;
}

.money1 .money2 span {
  color: #333;
  font-size: 30px;
  font-weight: 700;
}

.money1 .money2 small {
  font-size: 20px;
  font-weight: 400;
}

.money1 .money2 i {
  text-decoration: line-through;
}

.money1 ._2HYzkVJR8XyN9Unid7rbiU {
  margin: 6px auto;
  padding: 0 8px;
  color: #e46343;
  height: 24px;
  width: auto !important;
  font-size: 12px;
  line-height: 24px;
  background-color: #ffebd8;
}

.pay1._1CoycMJht7_QbyMpw7wiqE {
  width: auto;
  padding: 10px 32px;
}

.pay1.PuJyIRnrZxThfabjeNjl3 {
  padding: 0;
  width: 80%;
  flex: 0 0 80%;
  margin: 0 auto;
  flex-wrap: wrap;
  justify-content: center;
  background-color: transparent;
}

.pay1.PuJyIRnrZxThfabjeNjl3 .pay3 {
  display: flex;
  flex: 0 0 200px;
  border-bottom-width: 0;
  border-right-width: 1px;
}

.pay1.PuJyIRnrZxThfabjeNjl3 .pay3 > * {
  width: 50%;
  height: 45px;
  padding: 0 !important;
  justify-content: center;
  border-right: none !important;
  border-bottom: 1px solid #e4e4e4 !important;
}

.pay1.PuJyIRnrZxThfabjeNjl3 .pay3 > * > * {
  flex: 0 0 auto;
}

.pay1.PuJyIRnrZxThfabjeNjl3 .pay3 > :first-child {
  border-right: 1px solid #e4e4e4 !important;
}

.pay1.PuJyIRnrZxThfabjeNjl3 .pay3 > .pay2 {
  border-bottom: none !important;
}

.pay1.PuJyIRnrZxThfabjeNjl3 .ma1 {
  width: 200px;
  height: 200px;
  flex: 0 0 200px;
  border-top-width: 0;
  border-left-width: 1px;
}

.pay1.PuJyIRnrZxThfabjeNjl3 .ma1 > img {
  width: 236px;
  height: 236px;
}

.pay1.PuJyIRnrZxThfabjeNjl3 .money1 {
  flex: 0 0 100%;
  padding-left: 0;
  padding-top: 20px;
  text-align: center;
}

.pay1.PuJyIRnrZxThfabjeNjl3 .money1 .money2 span {
  color: #e46343;
}

.pay1.PuJyIRnrZxThfabjeNjl3 .money1 > :nth-child(2) {
  width: 100%;
}

button.bt1 {
  height: 120px;
  display: flex;
  cursor: pointer;
  // flex: 0 0 340px;
  text-align: left;
  align-items: center;
  position: relative;
  margin: 30px 15px;
  transition: all 0.2s;
  background-color: #fff;
  border: 2px solid #dbe7f5;
  border-width: 2px !important;
}

.bt1 > [class~="i-0"] {
  top: 0;
  left: 0;
  color: #e36f3f;
  font-weight: 600;
  font-size: 12px;
  padding: 0 14px;
  line-height: 30px;
  position: absolute;
  background-color: #fcf0eb;
  border-bottom-right-radius: 15px;
}

.bt1 .bt3 {
  padding-left: 20px;
  flex: 0 0 52%;
  color: #e36f3f;
  font-size: 50px;
  font-weight: 700;
}

.bt1 .bt3 small {
  font-size: 18px;
  font-weight: 600;
  margin-top: 18px;
}

.bt1 .bt3 span {
  font-weight: 600;
  font-size: 36px;
}

.bt1 .bt4 {
  color: #333;
  font-weight: 600;
  flex: 0 0 48%;
  flex-wrap: wrap;
  font-size: 20px;
  min-height: 60px;
  align-items: center;
  padding-left: 20px;
  border-left: 2px solid #dbe7f5;
}

.bt1 .bt4 small {
  color: #999;
  flex: 0 0 100%;
  font-size: 16px;
  line-height: 22px;
  font-weight: 400;
  text-decoration: line-through;
}

.bt1 .bt5 {
  right: 0;
  bottom: 0;
  opacity: 0;
  transition: all 0.2s;
  color: #fff;
  padding: 0 10px;
  position: absolute;
  box-sizing: content-box;
  border-top-left-radius: 10px;
  background-color: #388ae9;
}

.bt1.bt2 {
  border-color: #388ae9;
  background-color: #f5faff;
}

.bt1:hover {
  border-color: #388ae9;
}

.tips1 .tips2 {
  height: 100%;
  display: flex;
  overflow: auto;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px 0 20px;
}

.tips1 .tips3 {
  display: flex;
  flex-direction: column;
  margin-right: 30px;
}

.tipitem {
  color: #666;
  margin-left: 10px;
}

.tips1 .tips3 img {
  margin: 0 auto;
}

.tips1 .tips3 span {
  color: #666;
  height: 26px;
  line-height: 26px;
}

.tips1 .full {
  flex: 0 0 90px;
}

.tips1._35WosnZppuTeTibYO6nMTh {
  height: auto;
  flex-wrap: wrap;
}

.tips1._35WosnZppuTeTibYO6nMTh .tips2 {
  padding-left: 0;
  flex-wrap: wrap;
  justify-content: center;
}

.tips1._35WosnZppuTeTibYO6nMTh .tips3 {
  margin: 12px;
  min-width: 33.33%;
  align-items: center;
}

.tips1._35WosnZppuTeTibYO6nMTh .full {
  color: #999;
  flex: 0 0 100%;
  text-align: center;
  padding: 12px 12px 24px;
}

._2NSpbJeYXtH7ckN06-DT-6 {
  min-width: 720px;
}

._2NSpbJeYXtH7ckN06-DT-6 [class~="ant-card-body"] {
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
}

.out1 [class~="ant-modal-content"] {
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}

.out1 [class~="ant-modal-body"] {
  padding: 0;
}

.out1 [class~="ant-modal-close-x"] {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 15px 20px 0 0;
}

.out1 .close1 {
  transition: all 0.6s;
  transform: rotate(0);
}

.out1 .close1:hover {
  transform: rotate(1turn);
}

._3Ca0_t0UlgCbX-1zfQagsJ {
  margin-top: 20px;
}

.out8 ._3B1_mETI1Dupwy5HNFGsMf {
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 20px;
  margin-bottom: 20px;
}

.out8 ._3B1_mETI1Dupwy5HNFGsMf:before {
  background: linear-gradient(90deg, #f4f7fb, #2676d3);
}

.out8 ._3B1_mETI1Dupwy5HNFGsMf:after {
  background: linear-gradient(-90deg, #f4f7fb, #2676d3);
}

._3B1_mETI1Dupwy5HNFGsMf:after,
._3B1_mETI1Dupwy5HNFGsMf:before {
  height: 2px;
  top: 9px !important;
  border: none !important;
}

.ant-divider {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: rgba(0, 0, 0, 0.85);
  font-size: 14px;
  font-variant: tabular-nums;
  line-height: 1.5715;
  list-style: none;
  font-feature-settings: "tnum";
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.ant-divider-vertical {
  position: relative;
  top: -0.06em;
  display: inline-block;
  height: 0.9em;
  margin: 0 8px;
  vertical-align: middle;
  border-top: 0;
  border-left: 1px solid rgba(0, 0, 0, 0.06);
}

.ant-divider-horizontal {
  display: flex;
  clear: both;
  width: 100%;
  min-width: 100%;
  margin: 24px 0;
}

.ant-divider-horizontal.ant-divider-with-text {
  display: flex;
  margin: 16px 0;
  color: rgba(0, 0, 0, 0.85);
  font-weight: 500;
  font-size: 16px;
  white-space: nowrap;
  text-align: center;
  border-top: 0;
  border-top-color: rgba(0, 0, 0, 0.06);
}

.ant-divider-horizontal.ant-divider-with-text:after,
.ant-divider-horizontal.ant-divider-with-text:before {
  position: relative;
  top: 50%;
  width: 50%;
  border-top: 1px solid transparent;
  border-top-color: inherit;
  border-bottom: 0;
  transform: translateY(50%);
  content: "";
}

.ant-divider-horizontal.ant-divider-with-text-left:before {
  top: 50%;
  width: 5%;
}

.ant-divider-horizontal.ant-divider-with-text-left:after,
.ant-divider-horizontal.ant-divider-with-text-right:before {
  top: 50%;
  width: 95%;
}

.ant-divider-horizontal.ant-divider-with-text-right:after {
  top: 50%;
  width: 5%;
}

.ant-divider-inner-text {
  display: inline-block;
  padding: 0 1em;
}

.ant-divider-dashed {
  background: none;
  border: dashed rgba(0, 0, 0, 0.06);
  border-width: 1px 0 0;
}

.ant-divider-horizontal.ant-divider-with-text.ant-divider-dashed {
  border-top: 0;
}

.ant-divider-horizontal.ant-divider-with-text.ant-divider-dashed:after,
.ant-divider-horizontal.ant-divider-with-text.ant-divider-dashed:before {
  border-style: dashed none none;
}

.ant-divider-vertical.ant-divider-dashed {
  border-width: 0 0 0 1px;
}

.ant-divider-plain.ant-divider-with-text {
  color: rgba(0, 0, 0, 0.85);
  font-weight: 400;
  font-size: 14px;
}

.anticon {
  display: inline-block;
  color: inherit;
  font-style: normal;
  line-height: 0;
  text-align: center;
  text-transform: none;
  vertical-align: -0.125em;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.anticon > * {
  line-height: 1;
}

.anticon svg {
  display: inline-block;
}

.anticon:before {
  display: none;
}

.anticon .anticon-icon {
  display: block;
}

.anticon[tabindex] {
  cursor: pointer;
}

.anticon-spin,
.anticon-spin:before {
  display: inline-block;
  animation: loadingCircle 1s linear infinite;
}

.vip1 {
  flex: 0 0 100%;
  position: relative;
  margin: -20px -40px 20px;
}

.vip1:after {
  position: absolute;
  bottom: 0;
  left: -40px;
  right: -40px;
  content: " ";
  border-bottom: 1px solid #dbe7f5;
}

.vip1 .vip2 {
  width: 50%;
  height: 50px;
  font-size: 16px;
  line-height: 50px;
  position: relative;
}

.vip1 .vip2[class~="ed"]:after {
  content: " ";
  bottom: 0;
  left: 50%;
  width: 34px;
  position: absolute;
  // border-bottom: 3px solid #2676d3;
  transform: translate(-50%);
}

.vip1 .vip2 img {
  height: 30px;
  width: 30px;
}

.vip1._11SpTQ2qD9n24nf4AcY76u {
  margin: 0;
  overflow: hidden;
  padding-top: 12px;
}

.vip1._11SpTQ2qD9n24nf4AcY76u .vip2 {
  padding: 0 12px;
}

.vip1._11SpTQ2qD9n24nf4AcY76u .vip2 small {
  display: none;
}
svg {
  fill: currentColor;
}

svg:not(:root) {
  overflow: hidden;
}

.ma1 {
  width: 164px;
  height: 164px;
  flex-wrap: wrap;
  flex: 0 0 164px;
  overflow: hidden;
  position: relative;
  border: 1px solid #e4e4e4;
  border-left-width: 0;
  background-color: #fff;
}

.ma1 .ma2 {
  flex: 0 0 90%;
  text-align: center;
}

.ma1 ._2L4bgMnnT32_mFABiArg-i {
  width: 90%;
  height: 90%;
  opacity: 0.95;
  text-align: center;
}

.ma1 ._2L4bgMnnT32_mFABiArg-i * {
  color: #60c61c;
}
.outer12 {
  display: flex;
  align-items: center;
  justify-content: center;
}
.money1 {
  color: #999;
  text-align: left;
  padding-left: 30px;
}

.money1 > * {
  margin: 0;
  line-height: 32px;
}

.money1 > :nth-child(2) {
  width: 150px;
  overflow: hidden;
}

.money1 .money2 {
  position: relative;
}

.money1 .money2 span {
  color: #333;
  font-size: 30px;
  font-weight: 700;
}

.money1 .money2 small {
  font-size: 20px;
  font-weight: 400;
}

.money1 .money2 i {
  text-decoration: line-through;
}

.money1 ._2HYzkVJR8XyN9Unid7rbiU {
  margin: 6px auto;
  padding: 0 8px;
  color: #e46343;
  height: 24px;
  width: auto !important;
  font-size: 12px;
  line-height: 24px;
  background-color: #ffebd8;
}

.pay3 {
  flex: 0 0 112px;
  border: 1px solid #e4e4e4;
  border-right-width: 0;
}

.pay3 > * {
  width: 100%;
  height: 50%;
  transition: all 0.2s;
  padding: 0 16px !important;
  border-right: 1px solid #e4e4e4 !important;
}

.pay3 > :first-child {
  border-bottom: 1px solid #e4e4e4;
}

.pay3 > .pay2 {
  background-color: #fff;
  border-right: none !important;
}

button.ck,
button.link,
button.linkWx {
  padding: 0;
  box-shadow: none;
  border-width: 0;
  background-color: transparent;
}

button.ck,
button.evt,
button.link,
button.linkWx {
  outline: none !important;
}

button.link[disabled] {
  background-color: transparent;
}

button.round:hover {
  background-color: #e4e4e4;
  border-color: transparent;
}

.link.ed,
.link:not([disabled]):not(.disabled):hover,
a.ed,
a:not([disabled]):hover {
  cursor: pointer;
}

.linkWx.ed,
.linkWx:not([disabled]):not(.disabled):hover,
a.ed,
a:not([disabled]):hover {
  cursor: pointer;
  color: #fe7239;
}

.y_link.ed,
.y_link:not([disabled]):not(.disabled):hover,
.y_link a.ed,
.y_link a:not([disabled]):hover {
  cursor: pointer;
  color: #ff8c39;
}

.el-menu-item {
  color: #303133;
  width: 50%;
  padding: 0 20px;
  cursor: pointer;
  transition: border-color 0.3s, background-color 0.3s, color 0.3s;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}
.num {
  list-style-type: circle;
}

.num li {
  float: left;
  list-style-type: circle;
}

.QRcode {
  text-align: center;
  padding: 4px 8px 4px 8px;
  // position: fixed;
  // top: 30%;
  background: #ffffff;
  border-radius: 2px;
  z-index: 9999;
  &-top {
    // background: black;
    width: 120px;
    height: 120px;
    img {
      display: block;
      width: 100%;
      height: 100%;
    }
  }
  &-text {
    margin-top: 4px;
    font-size: 14px;
    color: #3f4750;
  }
}
</style>
